import React from 'react';
import {
  Platform,
  Text,
  Image,
  FlatList,
  TouchableOpacity,
  View
} from 'react-native';
import { TableList,PlaceHolderView,BaseComponent,NavBar } from '../wedgets';
import { Fetch } from '../lib';

export default class Weathers extends BaseComponent {
  static navigationOptions = ({ navigation }) => ({
    header:<NavBar 
    title={navigation.state.params.title} 
    navigation={navigation} 
    enableBackBtn={true} 
    backColor={'#fff'}
    titleColor={'#fff'} />
  })

  //list请求数据实现入口,这里请求城市列表
  fetchData = async(page, startFetch, abortFetch) => {
    //模仿数据下拉加载
    let area_code = this.props.navigation.state.params.area_code||'';
    console.log('========>',area_code);
    new Fetch({
      //typescript写法直接给字符串插入参数
      url:`http://www.weather.com.cn/data/city3jdata/provshi/${area_code}.html`,
      method:'get',
    }).dofetch().then((res)=>{
      console.log('=====>',res);
      let pros = [];
      for(let i in res){
        pros.push({[i]:res[i]});
      }
      
      startFetch(pros, 1000)//下面的列表组件关闭了分页pagination这里直接加载1000条
    }).catch((err)=>{
      abortFetch()
    })
  }



  renderRow=({ item, index })=>{
    console.log('======000',item)
    const {navigation} = this.props;
    return<TouchableOpacity
    onPress={()=>{
      //由于本Component继承自BaseComponent所以可以直接调用BaseComponent的方法
      this.goToComponent('AreaWeathers',{
        //这里可以传递参数,这里我们把省份编码传递到下一个界面
        area_code:navigation.state.params.area_code+Object.keys(item)[0],
        title:`${navigation.state.params.title}天气`
      });
    }}
     style={{height:100,borderBottomColor:'#F2F2F2',borderBottomWidth:PX_LINE,justifyContent:'center'}}>
      <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',width:SCREEN_W,paddingHorizontal:13}}>
        <Text style={{fontSize:14,color:'#999'}}>编码：{navigation.state.params.area_code+Object.keys(item)[0]}</Text>
        <Text style={{fontSize:18,color:'#66B8F5',marginLeft:13}}>选择地区 ></Text>
      </View>
      
      <Text style={{fontSize:14,color:'#999',marginTop:20,marginLeft:13}}>城市：{item[Object.keys(item)[0]]}</Text>
    </TouchableOpacity>
  }

  render() {
    const { navigation } = this.props;
    // navigation.setParams({
    //   visiable:false
    // });
    return (
        <View style={{flex:1}}>
          <TableList
            ref={list => this.list = list}
            style={{ backgroundColor: 'white' }}
            onFetch={this.fetchData}
            renderItem={this.renderRow}
            keyExtractor={item => item.id}
            pagination={false}
            initialNumToRender={10}
            paginationType={'value'}
            PaginationFetchingView={() => {
              return [
                <PlaceHolderView type={'video'} key={'top'} />,
                <PlaceHolderView type={'video'} key={'center'} />,
                <PlaceHolderView type={'video'} key={'bottom'} />
              ];
            }}
          />
        </View>

    );
  }
}

// class RowItem extends BaseComponent {
//   static propsTypes = {
//       rowData: PropTypes.any,
//       index: PropTypes.number
//   }
//   goToCoinDetail=()=>{
//       this.props.navigation&&this.goToComponent('RiskDetail',{title:'比特币'});
//   }
//   render(){
//       return(
//           <TouchableOpacity style={styles.cellStyle} onPress={this.goToCoinDetail.bind(this)}>
//               <Image style={styles.cellPhoto}/>
//               <Text style={styles.coinName}>  1ST/USDT</Text>
//               <Text style={styles.relateTopic}>相关话题 8</Text>
//               <Text style={styles.relateTopic}>相关情报 22</Text>
//               <Text style={styles.follow}>√关注</Text>
//           </TouchableOpacity>
//       )
//   }
// }

